<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 汽车销售分析系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .login-container {
            height: 100vh;
        }
        .car-bg {
            background-image: url('https://images.unsplash.com/photo-1593941707882-a0f6f4ad1d60?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .car-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0, 107, 194, 0.8) 0%, rgba(0, 69, 126, 0.9) 100%);
        }
        .car-feature {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            backdrop-filter: blur(5px);
        }
        .login-card {
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: none;
        }
        .form-control {
            padding: 12px 15px;
            border-radius: 8px;
        }
        .btn-login {
            background-color: #006bc2;
            border: none;
            padding: 12px;
            border-radius: 8px;
            font-weight: 600;
        }
        .btn-login:hover {
            background-color: #005aa3;
        }
        .ev-icon {
            color: #006bc2;
            font-size: 2.5rem;
        }
    </style>
</head>
<body>
    <div class="container-fluid login-container">
        <div class="row h-100">
            <!-- 左侧新能源汽车展示区 -->
            <div class="col-md-6 d-none d-md-flex car-bg text-white p-5 align-items-center">
                <div class="position-relative z-index-1">
                    <h1 class="display-4 fw-bold mb-4">新能源汽车数据分析平台</h1>
                    <p class="lead mb-5">洞察行业趋势 · 驱动智能决策 · 引领电动未来</p>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="car-feature">
                                <i class="bi bi-lightning-charge fs-3 mb-3"></i>
                                <h5>实时监控</h5>
                                <p class="small mb-0">跟踪全国新能源汽车销售动态</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="car-feature">
                                <i class="bi bi-graph-up fs-3 mb-3"></i>
                                <h5>智能分析</h5>
                                <p class="small mb-0">多维度可视化数据分析</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="car-feature">
                                <i class="bi bi-shield-check fs-3 mb-3"></i>
                                <h5>安全可靠</h5>
                                <p class="small mb-0">企业级数据安全保障</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="car-feature">
                                <i class="bi bi-gear fs-3 mb-3"></i>
                                <h5>智能预测</h5>
                                <p class="small mb-0">基于AI的市场趋势预测</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧登录表单区 -->
            <div class="col-md-6 d-flex align-items-center justify-content-center p-4">
                <div class="w-100" style="max-width: 450px;">
                    <div class="text-center mb-5">
                        <i class="bi bi-car-front-fill ev-icon mb-3"></i>
                        <h2 class="fw-bold mb-3">欢迎回来</h2>
                        <p class="text-muted">请登录您的账户访问数据分析平台</p>
                    </div>

                    <form method="POST" class="login-card bg-white p-4 p-md-5">
                        {{ form.hidden_tag() }}

                        <div class="mb-4">
                            <label for="username" class="form-label fw-semibold">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="bi bi-person"></i></span>
                                {{ form.username(class="form-control", placeholder="请输入用户名") }}
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label fw-semibold">密码</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="bi bi-lock"></i></span>
                                {{ form.password(class="form-control", placeholder="请输入密码") }}
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="rememberMe">
                                <label class="form-check-label" for="rememberMe">记住我</label>
                            </div>
                            <a href="#" class="text-decoration-none text-primary">忘记密码?</a>
                        </div>

                        <button type="submit" class="btn btn-login btn-primary w-100 mb-3">登录</button>

                        <div class="text-center mt-4">
                            <p class="text-muted">还没有账号? <a href="{{ url_for('auth.register') }}" class="text-decoration-none fw-semibold">立即注册</a></p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>